<template>
  <div class="details">
    <div class="experience">
      <CvSteps :label="item.label" :list="item.list" v-show="item.list.length > 0" v-for="item in experienceList"
        :active="item.list.length" :key="item.label"></CvSteps>
    </div>
    <div class="intention">
      <div class="intention-title">求职意向</div>
      <template v-if="intentionList.length > 0">
        <template v-for="item in intentionList">
          <CvItem :key="item.label" v-if="item.list.length > 0" :list="item.list" v-show="item.list.length > 0"
            :label="item.label"></CvItem>
        </template>
      </template>
      <div v-else class="no-data">未填写</div>
    </div>
  </div>
  <div class="statement">
    本人声明：我承诺以上提供的内容完全属实，如本声明及其他部分系伪造或不正确，本人同意并接受方田可随时终止同我签订的协议或合同。
  </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import CvSteps from './CvSteps.vue';
import CvItem from "./CvItem.vue";
// const props = defineProps(['currentResume']);
import { comStores } from '@/store/common/comStore';
import { title } from 'process';
const store = comStores()
const experienceList = ref<{ label: string; list: any }[]>([
  {
    label: "教育经历", list: [

    ]
  },
  {
    label: "实习经历", list: [
    ]
  },
  {
    label: "家庭情况", list: [

    ]
  },
  {
    label: "加分项", list: [

    ]
  },
])

const intentionList = ref<any>([
  {
    label: "应聘岗位科目", list: [
    ]
  },
  {
    label: "意向工作地点", list: [
    ]
  },

  {
    label: "意向年级段", list: [
    ]
  },
  {
    label: "意向学科", list: [
    ]
  },
  {
    label: "择业标准", list: [
    ]
  },
  {
    label: "应聘信息来源", list: [
    ]
  },
  {
    label: "最早可入职时间", list: [
    ]
  },
])

watch(() => store.currentResume, (val) => {
  console.log(val, 'cvdetails ===>?val')
  if (!val.userName) return
  experienceList.value[0].list = val?.educationalList.map(el => {
    return {
      title: el.schoolName,
      description: `${el.qualificationType} ${el.educationalStartTime}~${el.educationalEndTime}${el.schoolDepartment ? '\n院系：' + el.schoolDepartment : ''}${el.specialty ? '\n专业：' + el.specialty : ''}`
    }
  })
  experienceList.value[1].list = val?.workExperienceList.map(el => {
    return {
      title: el.workPlace + " • " + el.workPost,
      description: `${el.workDetail ? el.workDetail : '未填写'} \n${el.workStartDate}~${el.workEndDate}`
    }
  })
  experienceList.value[2].list = val?.familyMemberList.map(el => {
    return {
      title: el.relation,
      description: `姓名： ${el.name}\n年龄： ${el.age}\n电话： ${el.phone}\n工作单位： ${el.workPlace}\n职业： ${el.occupation}`
    }
  })
  let competitionRequestList = []
  try {
    competitionRequestList = val?.competitionRequestList.map(el => {
      return {
        title: "竞赛获奖",
        description: `${el.competitionType}\n${el.competitionLevel}`
      }
    })
  } catch (e) {
    competitionRequestList = []
  }

  experienceList.value[3].list = val.foreignLanguagesGrade ? [
    ...competitionRequestList,
    { title: "语言能力", description: `语言等级 ${val.foreignLanguagesGrade}\n得分 ${val.foreignLanguagesScore}分` },
  ] : competitionRequestList;
  const intentionPostList = JSON.parse(val?.intentionPostList[0] || "[]");
  console.log(intentionPostList, '====>intentionPostList')
  const intentionSubject = JSON.parse(val?.intentionSubject[0] || "[]")
  const intentionPlace = JSON.parse(val?.intentionPlace[0] || "[]")
  const intentionGrade = JSON.parse(val?.intentionGrade[0] || "[]")
  intentionList.value[0].list = intentionPostList.map(el => {
    return {
      title: `${el} ` + (val.workPlace ? `( ${val.workPlace.replaceAll('丶','/')})` : '')
    }
  })
  intentionList.value[1].list = intentionPlace.map((el, idx) => {
    const map = {
      1: "一",
      2: "二",
      3: "三",
      4: "四"
    }
    return {
      title: `第${map[idx + 1]}志愿：` + el
    }
  })
  let obj = {
    title: "工作城市是否服从分配：" + (val.areaIsAdjust == 0 ? "是" : '否')
  }
  intentionList.value[1].list.push(obj)

  intentionList.value[2].list = intentionGrade.map(el => {
    return {
      title: el
    }
  })

  intentionList.value[3].list = intentionSubject.map(el => {
    return {
      title: el
    }
  })

  intentionList.value[4].list = val?.standards.map(el => {
    return {
      title: el
    }
  })
  intentionList.value[5].list = val?.source.map(el => {
    return {
      title: el
    }
  })
  if (val?.intentionDate) {
    intentionList.value[6].list = [{
      title: val?.intentionDate
    }] as any
  }
}, { deep: true, immediate: true })

</script>
<style lang="less" scoped>
.details {
  margin-top: 13px;
  display: flex;

  .experience {
    flex: 1;
    background: #FFF7F3;
    border-radius: 10px 0px 0px 10px;
    margin-right: 16px;
    padding: 24px 16px;
    box-sizing: border-box;

    /deep/.ant-steps .ant-steps-item-finish .ant-steps-item-icon>.ant-steps-icon .ant-steps-icon-dot {
      background: #D9916C;
    }

    /deep/.ant-steps.ant-steps-vertical.ant-steps-dot .ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {
      margin-inline-start: 2.5px;
    }

    /deep/.ant-steps.ant-steps-vertical>.ant-steps-item>.ant-steps-item-container>.ant-steps-item-tail::after {
      width: 2px;
      border-left: 1px dashed #D9916C;
      background-color: transparent;
    }
  }

  .intention {
    flex: 1;
    background: #F5F7FB;
    border-radius: 0px 10px 10px 0px;
    padding: 24px 16px;
    box-sizing: border-box;
  }
}

.statement {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 20px;

  .pravite {
    cursor: pointer;
    color: #209EE4;
  }
}

.intention-title {
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  line-height: 23px;
  text-align: left;
  margin-bottom: 20px;
}
</style>